<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://java.sun.com/jsf/core">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/index.js"></script>
</head>
<style>
    li {
        list-style: none;
        display: inline-block;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    ul {
        height: auto;
        width: 100%;

    }

    #content {
        border: 5px;
        margin: 0 10% 0;
    }
</style>
<body>
<div id="main">
    <header style="text-align: center">
        <img src="../img/logo.png">
        <a href="/outs">退出</a>
    </header>
    <div id="content">
        <fieldset>
            <legend>看视频</legend>
            <ul v-for="(value,key) in videos">
                <h3>>>{{key}}</h3>
                <li v-for="video in value" @click="detail(video)">
                    <img v-bind:src="video.imgUrl" width="192" height="120">
                    <br>
                    <span style="font-size: 12px">{{ video.name }}</span>
                </li>
            </ul>
        </fieldset>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#main',
        data() {
            return {
                videos: {}
            }
        },
        created: function () {
            this.getVideoList();
        },
        methods: {
            getVideoList() {
                let here = this;
                axios({
                    method: 'post',
                    url: '/dao/aaa',
                }).then(function (response) {
                    here.videos = JSON.parse(decodeURIComponent(response.data));
                });
            },
            detail(video) {
                window.open('http://localhost:8080/user/player.html?vid=' + video.vid + '&av=' + video.av);
            }
        }

    });
</script>
</html>
